<template>
	<view class="box">
		<!-- 轮播图 -->
		<u-swiper class="Carousel" :list="carouselList" indicator indicatorMode="line" circular
			height="350rpx"></u-swiper>
		<!-- 功能 -->
		<view class="block">
			<navigator class="item" url="/pages/health/health" hover-class="navigator-hover">
				<image src="../static/img/indexPage/health.png" style="width: 120rpx;height: 120rpx;" mode="aspectFit">
				</image>
				<view style="font-size: 40rpx;">健康咨询</view>
			</navigator>
			<navigator class="item" url="/pages/run/run" hover-class="navigator-hover">
				<image src="../static/img/indexPage/run.png" style="width: 120rpx;height: 120rpx;" mode="aspectFit">
				</image>
				<view style="font-size: 40rpx;">运动打卡</view>
			</navigator>
			<navigator class="item" url="/pages/dish/index" hover-class="navigator-hover">
				<image src="../static/img/indexPage/dish.png" style="width: 120rpx;height: 120rpx;" mode="aspectFit">
				</image>
				<view style="font-size: 40rpx;">膳食分析</view>
			</navigator>
			<navigator class="item" url="/pages/book/index" hover-class="navigator-hover">
				<image src="../static/img/indexPage/book.png" style="width: 120rpx;height: 120rpx;" mode="aspectFit">
				</image>
				<view style="font-size: 40rpx;">懒人听书</view>
			</navigator>
			<view class="item" @click="showDate = true">
				<image src="../static/img/indexPage/data.png" style="width: 120rpx;height: 120rpx;" mode="aspectFit">
				</image>
				<view style="font-size: 40rpx;">万年历</view>
			</view>

			<!-- 查看万年历界面 -->
			<u-calendar showLunar :show="showDate" title="万年历" confirmText="查看" @confirm="openDateBlock"
				@close="showDate=false" closeOnClickOverlay="true">
			</u-calendar>
			<!-- 查看万年历详细信息 -->
			<u-modal :show="showBlock" :title="selectDate" @confirm="showBlock=false" confirmText="关闭"
				closeOnClickOverlay="true" @close="showBlock=false">
				<view class="detail" style="width: 100%;">
					<view class="swipe-action">
						<view class="swipe-action__content" v-model="detail">
							<text class="swipe-action__content__text" style="font-size: 35rpx">{{detail.date}}</text>
						</view>
					</view>
					<u-divider></u-divider>
					<view class="swipe-action">
						<view class="swipe-action__content" v-model="detail">
							<text class="swipe-action__content__text"
								style="font-size: 35rpx">{{detail.yearTips+detail.chineseZodiac+'年'}}</text>
						</view>
					</view>
					<u-divider></u-divider>
					<view class="swipe-action">
						<view class="swipe-action__content" v-model="detail">
							<text class="swipe-action__content__text"
								style="font-size: 35rpx">{{'星期'+weekdayArr[detail.weekDay-1]+' ('+detail.constellation+')'}}</text>
						</view>
					</view>
					<u-divider></u-divider>
					<view class="swipe-action">
						<view class="swipe-action__content" v-model="detail">
							<text class="swipe-action__content__text"
								style="font-size: 35rpx">节日：{{detail.type==0?'无':detail.typeDes}}</text>
						</view>
					</view>
					<u-divider></u-divider>
					<view class="swipe-action">
						<view class="swipe-action__content" v-model="detail">
							<text class="swipe-action__content__text"
								style="font-size: 35rpx">{{'节气：'+detail.solarTerms}}</text>
						</view>
					</view>
					<u-divider></u-divider>
					<view class="swipe-action">
						<view class="swipe-action__content" v-model="detail">
							<text class="swipe-action__content__text"
								style="font-size: 35rpx">{{'宜：'+detail.suit}}</text>
						</view>
					</view>
					<view class="swipe-action">
						<view class="swipe-action__content" v-model="detail">
							<text class="swipe-action__content__text"
								style="font-size: 35rpx">{{'忌：'+detail.avoid}}</text>
						</view>
					</view>
				</view>
			</u-modal>

			<view class="item" hover-class="navigator-hover" @click="handleBuilding">
				<image src="../static/img/indexPage/dream.png" style="width: 120rpx;height: 120rpx;" mode="aspectFit">
				</image>
				<view style="font-size: 40rpx;">周公解梦</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDateDetail
	} from '@/api/indexPage.js';
	export default {
		data() {
			return {
				// 轮播图
				carouselList: [
					'https://allinwhat.oss-cn-beijing.aliyuncs.com/img-0.jpg',
					'https://allinwhat.oss-cn-beijing.aliyuncs.com/img-1.jpg',
					'https://allinwhat.oss-cn-beijing.aliyuncs.com/img-2.png'
				],
				// 万年历弹窗
				showDate: false,
				// 查看万年历详细信息
				showBlock: false,
				selectDate: '标题',
				detail: {
					date: "2018-11-21",
					lunarCalendar: "十月十四",
					yearTips: "戊戌",
					chineseZodiac: "狗",
					weekDay: 1,
					constellation: "天蝎座",
					// 工作日0 假日 1 节假日 2
					type: 0,
					typeDes: "工作日",
					solarTerms: "立冬后",
					suit: "破屋.坏垣.祭祀.余事勿取",
					avoid: "嫁娶.安葬",
				},
				//匹配星期
				weekdayArr: ["一", "二", "三", "四", "五", "六", "日"]
			}
		},
		onLoad() {

		},
		methods: {
			//万年历详情查看
			async openDateBlock(date) {
				this.selectDate = date[0];
				// 格式转化，去掉"-"
				const formattedDate = date[0].replace(/-/g, '');

				try {
					const detail = await getDateDetail(formattedDate);
					console.log(detail);
					this.detail = detail.data;
				} catch (error) {
					console.error('Failed to get date detail:', error);
				}

				this.showBlock = true;
			},
			// 模块建设中
			handleBuilding() {
				this.$modal.showToast('模块建设中~')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		.Carousel {}

		.block {
			height: 500rpx;
			width: 720rpx;
			margin: 50rpx auto;
			background-color: white;
			margin-top: 30rpx;
			border-radius: 20rpx;
			border: 3rpx #f3f4f7 solid;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.5);

			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			align-items: center;

			.item {
				width: 210rpx;
				height: 200rpx;
				margin: 15rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}


			.detail {
				display: flex;
				flex-direction: column;
				width: calc(100% - 100rpx);
				margin-left: 10rpx;
				height: 100%;

				.swipe-action {
					align-content: center;
					margin: 0 10rpx;
					height: inherit;
				}

				.swipe-action__content {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;
				}
			}


			.monthBlock {
				width: 10rpx;
			}

			.detail {
				.swipe-action {
					align-content: center;
					margin: 0 10rpx;
				}
			}
		}
	}
</style>